<template>
  <div class="game-card-content">
    <div class="game-image-wrapper" @click.stop="handlePlay">
      <el-popover v-model:visible="popoverVisible" popper-class="game-popover" placement="right-start" :width="398"
        trigger="manual" :show-arrow="false" @show="handlePopoverShow" @hide="handlePopoverHide">
        <!-- 自定义内容插槽 -->
        <div class="popover-content" @mouseleave="hidePopover">
          <!-- 条件显示视频或图片 -->
          <video v-if="game.videoUrl" ref="videoElement" :src="game.videoUrl" class="popover-img" loop muted
            playsinline></video>
          <img v-else :src="game.coverUrl" :alt="game.title" class="popover-img">
          <div class="popover-info">
            <h4 class="popover-title">{{ game.title }}</h4>
            <p class="popover-slogan">{{ game.slogan }}</p>
            <div class="game-stats" v-if="game.tags && game.tags.length > 0">
              <div v-for="tag in game.tags" :key="tag">
                <el-tag class="stat-item" type="info">{{ tag.name }}</el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 触发元素插槽 -->
        <template #reference>
          <div class="game-image" @mouseenter="showPopover" @mouseleave="handleReferenceMouseLeave">
            <img :src="game.coverUrl" :alt="game.title" class="card-img">
          </div>
        </template>
      </el-popover>

      <!-- 需账号标记 -->
      <div class="game-account"
        v-if="game.cornerMarkers && game.cornerMarkers.length > 0 && game.cornerMarkers[0] == 2">
        需账号
      </div>
    </div>

    <!-- 游戏基本信息 -->
    <div class="game-info" @click="handlePlay">
      <h3 class="game-title">{{ game.title }}</h3>
      <p class="game-desc">{{ game.slogan }}</p>
      <div class="game-actions">
        <el-button type="primary" class="play-btn" :loading="game.loading" style="color: #FFE500;"
          v-if="game.session && game.session.status == 'online'" @click.stop="gameDetailHandlePlayGame(game.id)">
          继续游戏
        </el-button>
        <el-button type="primary" class="play-btn" :loading="game.loading" v-else
          @click.stop="gameDetailHandlePlayGame(game)">
          <el-icon v-show="!game.loading">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M5.4109 8.01956H3.06298C2.75644 8.01956 2.54498 7.71273 2.65407 7.42646L4.98711 1.30262C5.01867 1.21977 5.07466 1.14847 5.14766 1.09815C5.22066 1.04784 5.30722 1.02089 5.39588 1.02087H9.3328C9.64342 1.02087 9.85517 1.33558 9.73792 1.62331L8.37948 4.95765H10.9368C11.3129 4.95765 11.5136 5.40098 11.2655 5.6836L4.99557 12.828C4.69077 13.1754 4.12567 12.8744 4.24394 12.4277L5.4109 8.01956Z" />
            </svg>
          </el-icon>
          秒玩
        </el-button>
        <span v-if="game.needsLogin" class="login-tip">需要账号</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useLoginCheck, handlePlayGame } from "@/utils/auth.js";
import { useRouter } from 'vue-router'

// 定义接收父组件传递的 props
const props = defineProps({
  game: {
    type: Object,
    required: true
  }
})

// 定义向父组件传递的事件
const emit = defineEmits(['play'])

// 引用
const videoElement = ref(null)
const popoverVisible = ref(false)
const mouseTimer = ref(null)

// 秒玩游戏处理函数
const gameDetailHandlePlayGame = (res) => {
  // 传入目标类型:1=云游戏;2=云电脑
  handlePlayGame(props.game.id, "1", handlePlayGameCallback, 1);
}
// 使用全局handlePlayGame方法
const handlePlayGameCallback = (status, data) => {
  console.log(status);
  
  // 重置loading状态
  props.game.loading = false;
  switch (status) {
    case "loading": //加载中
      // 重置loading状态
      props.game.loading = true;
      break;
    case "cancel": //取消

      break;
    case "confirm": //确认
      // 传入目标类型:1=云游戏;2=云电脑
      handlePlayGame(props.game.id, "1", handlePlayGameCallback, 0);
      break;
  }
};


// 显示popover
const showPopover = () => {
  // 清除可能存在的定时器
  if (mouseTimer.value) {
    clearTimeout(mouseTimer.value)
    mouseTimer.value = null
  }

  popoverVisible.value = true
}

// 隐藏popover
const hidePopover = () => {
  popoverVisible.value = false
}

// 处理引用元素鼠标离开事件
const handleReferenceMouseLeave = () => {
  // 添加一个小延迟，让用户有时间移动鼠标到popover上
  mouseTimer.value = setTimeout(() => {
    hidePopover()
  }, 100)
}

// popover显示时处理视频播放
const handlePopoverShow = () => {
  if (videoElement.value && props.game.videoUrl) {
    videoElement.value.play().catch(error => {
      console.log('视频播放失败:', error)
    })
  }
}

// popover隐藏时处理视频暂停和清理定时器
const handlePopoverHide = () => {
  if (videoElement.value && props.game.videoUrl) {
    videoElement.value.pause()
  }

  // 清理定时器
  if (mouseTimer.value) {
    clearTimeout(mouseTimer.value)
    mouseTimer.value = null
  }
}

const router = useRouter()
// 引入登录检查模块
const { checkAndPerform } = useLoginCheck()

// 秒玩游戏处理函数
const handlePlay = () => {
  // 检查登录并执行操作
  // checkAndPerform(() => {
  // 登录成功后执行的操作
  console.log("已经登录成功。。。开始启动游戏");
  router.push(`/cloudGaming/detail/${props.game.id}`)

  // 触发自定义事件，通知父组件
  emit('play', props.game)
  // })
}
</script>

<style lang="scss" scoped>
.game-card-content {
  position: relative;

  .game-image-wrapper {
    width: 100%;
    position: relative;

    .game-image {
      width: 100%;
      position: relative;
      overflow: hidden;
      padding-top: 56.25%; // 16:9 aspect ratio (9/16 = 0.5625)

      .card-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }
  }

  .game-account {
    width: 52px;
    height: 24px;
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    color: #ffe500;
    background: rgba(0, 0, 0, 0.65);
  }

  .game-info {
    padding: 16px 0;

    .game-title {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      margin: 0 0 8px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: color 0.3s ease;
    }
     .game-title:hover {
      color: #ffe500;
     }

    .game-desc {
      font-size: 14px;
      color: #949495;
      margin: 0 0 12px 0;
    }

    .game-actions {
      display: flex;
      align-items: center;
      gap: 8px;

      .play-btn {
        width: 70px;
        background-color: #232527;
        border-color: #232527;
        font-size: 14px;
        padding: 4px 16px;
transition: color 0.3s ease;
        svg {
          fill: #E2E2E2;
        }

        &:hover {
          color: #ffe500;
          background-color: rgba(255, 255, 255, 0.05);

          svg {
            fill: #ffe500 !important;
          }
        }
      }

      .login-tip {
        font-size: 12px;
        color: #ffe500;
        // background: rgba(255, 229, 0, 0.65);
        padding: 4px 12px;
        border-radius: 4px;
      }
    }
  }
}
</style>
